<template>
	<div class="container">
		<div class="wrapper">
			<h1>WEB ADMIN</h1>
			<el-form label-width="auto" :model="form" :rules="rules" ref="form" v-loading="isloading">
				<el-form-item label="用户" prop="username">
					<el-input v-model="form.username" placeholder="请输入用户名">
						<i slot="prefix" class="el-input__icon el-icon-user"></i>
					</el-input>
				</el-form-item>
				<el-form-item label="密码" prop="password">
					<el-input v-model="form.password" placeholder="请输入密码" show-password>
						<i slot="prefix" class="el-input__icon el-icon-lock"></i>
					</el-input>
				</el-form-item>
				<el-row>
					<el-button type="primary" size="mini" @click="login">登录</el-button>
					<el-button type="success" size="mini" @click="resetForm('form')">重置</el-button>
				</el-row>
			</el-form>
		</div>
	</div>
</template>

<script>
	import {mapMutations} from 'vuex'
	import {initDynamicRoutes} from '@/router/index.js'
	export default {
		name: 'Login',
		data() {
			return {
				form: {
					username: 'admin',
					password: 'admin',
				},
				isloading: false,
				rules: {
					username: [{
							required: true,
							message: '请输入用户名',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 18,
							message: '长度在 3 到 18 个字符',
							trigger: 'blur'
						}
					],
					password: [{
							required: true,
							message: '请输入密码',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 18,
							message: '长度在 3 到 18 个字符',
							trigger: 'blur'
						}
					],
				}
			}
		},
		methods: {
			...mapMutations(['setUser']),
			resetForm(formName) {
				this.$refs[formName].resetFields();
			},
			login() {
				/* this.$axios.post('/login',{
					username:this.form.username,
					password:this.form.password
				}).then(res=>{
					console.log(res);
					this.$store.commit('setUser',res.data)
					window.sessionStorage.setItem('token',res.data.token)
					this.$router.push('/')
				}) */
				this.isloading = true
				this.$api.login({
					username: this.form.username,
					password: this.form.password
				}).then(res => {
					console.log(res);
					/* this.$store.commit('setUser', res.data) */
					this.setUser(res.data)
					window.sessionStorage.setItem('token', res.data.token) 
					this.isloading = false
					this.$router.push('/')
					initDynamicRoutes()
					this.$message({
						message: '恭喜你，登录成功',
						type: 'success'
					});
				})

			}
		}
	}
</script>

<style scoped="scoped">
	.container {
		width: 100%;
		height: 100%;
		position: absolute;
		bottom: 0;
		left: 0;
		overflow: hidden;
		background-color: #2B4B6B;
	}

	.wrapper {
		width: 500px;
		height: 320px;
		background-color: #fff;
		margin: 120px auto;
	}

	.wrapper {
		padding: 0 30px;
	}

	.wrapper h1 {
		color: #666;
		text-align: center;
		padding: 20px 0 30px 0;
	}

	.el-row {
		float: right;
	}
</style>
